<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org/">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>用户资源管理</title>
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.css" th:href="@{/css/bootstrap.css}" />
    <link rel="stylesheet" type="text/css" href="/css/back-index.css"  th:href="@{/css/back-index.css}"/>
    <link rel="stylesheet" href="/layui/css/layui.css" th:href="@{/layui/css/layui.css}" media="all">
    <script src="/js/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script src="/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
    <script src="/js/bootstrap-paginator.js"></script>
    <script src="/js/bootstrap-mypaginator.js"></script>
    <script src="/layui/layui.js"></script>
    <style>
    .file {
        position: relative;
        display: inline-block;
        background: #D0EEFF;
        border: 1px solid #99D3F5;
        border-radius: 4px;
        padding: 4px 12px;
        overflow: hidden;
        color: #1E88C7;
        text-decoration: none;
        text-indent: 0;
        line-height: 20px;
        width: 100%;
        text-align: center;
    }
    .file:hover {
        background: #AADFFD;
        border-color: #78C3F3;
        color: #004974;
        text-decoration: none;
    }
    .file:focus {
        background: #AADFFD;
        border-color: #78C3F3;
        color: #004974;
        text-decoration: none;
    }

    .width120 {
        max-width: 120px;
        word-break:break-all;
    }
    .width90 {
        max-width: 90px;
        word-break:break-all;
    }
    .width50 {
        max-width: 50px;
        word-break:break-all;
    }

    </style>
    <script type="text/javascript">
        $(function(){

            // 显示隐藏查询列表
            $('#show-user-resource-search').click(function() {
                $('#show-user-resource-search').hide();
                $('#upp-user-resource-search').show();
                $('.show-user-resource-search').slideDown(500);
            });
            $('#upp-user-resource-search').click(function() {
                $('#show-user-resource-search').show();
                $('#upp-user-resource-search').hide();
                $('.show-user-resource-search').slideUp(500);
            });

            //添加章节
            $("#doAddCourseReource").on('click', function(){
                $(".modal-title").html("添加资源");
                // $("#course-resource-id-input").hide();
                $("#courseReourceModal").modal("show");
                $("#add-resource-true2").show();
                $("#modify-resource-true2").hide();
            });
            $(".course-reource-btn").on('click', function(){
                $("#courseReourceModal").modal("hide");
            });


            // $(".course-reource-modify-btn").on('click', function(){
            //     $(".modal-title").html("修改资源");
            //     $("#courseReourceModal").modal("show");
            //     $("#add-resource-true2").hide();
            //     $("#modify-resource-true2").show();
            // });
            //添加资源
            $("#add-resource-true").click(function () {
                let formData=new FormData($("#myForm")[0]);
                let chapterId=$("#course-resource-id").val();
                let courseId=$("#courseId").val();
                $.ajax({
                    type:"post",
                    url:"/backResource/addResource",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (respnse) {


                        if (respnse.status==1){
                            alert(respnse.message)
                            location.href="/backResource/showResources?courseId="+courseId+"&chapterId="+chapterId;
                        }
                        else{
                            alert(respnse.message)
                        }
                    }
                })
            })

            layui.use('laydate',function () {
                let laydate = layui.laydate;
                let laydate2 = layui.laydate;
                laydate.render({
                    elem: '#dateStart'
                    ,type: 'datetime'
                    //或 range: '~' 来自定义分割字符
                });
                laydate2.render({
                    elem: '#dateEnd'
                    ,type: 'datetime'
                    //或 range: '~' 来自定义分割字符
                });
            })

        });

        //显示单个资源详情
        function showResourceDetail(resourceId) {
            $('#frame-id', window.parent.document).attr('src', '/backResource/showResourceDetail?id='+resourceId);
        }
        function fileUpload(item){
            $(item).click();
        }
        function fileChange(item){
            var file = item.files[0];//获取选中的第一个文件
            $(".file").html(file.name);
            //console.log("file", file.name);
        }

        function modifyStatus(resourceId) {
            $.ajax({
                type: "post",
                url: "/backResource/modifyStatus",
                data:{"resourceId":resourceId},
                success: function (response) {
                    if (response.status==1){
                        location.href="/backResource/showResources?courseId="+[[${courseId}]]+"&chapterId="+[[${chapterId}]];
                    }
                }
            })
        }

        function searchResources() {
            $("#showList").empty();
            $("#showList").load("/backResource/searchResources",{"title":$("#user-resource-title-search").val(),"userId":$("#user-name-search").val(),
                "dateStart":$("#dateStart").val(),"dateEnd":$("#dateEnd").val(),"status":$("#status").val(),"fileType":$("#fileType").val(),
                "courseId":$("#search-courseId").val(),"chapterId":$("#search-chapterId").val()})
        }
        function selectResource(id) {
            $.ajax({
                type: "post",
                url: "/backResource/selectResource",
                data:{"id":id},
                success: function (response) {
                    if (response.status==1){

                        $("#courseId").val(response.object.courseId);
                        $("#course-resource-id").val(response.object.chapterId);
                        $("#course-resource-file-title").val(response.object.title);
                        $("#file-cost-type").val(response.object.costType);
                        $("#file-cost-type-val").val(response.object.costNumber);
                        $("#resource-type-id").val(response.object.fileType);
                        $("#resourceId").val(response.object.id);
                        $(".modal-title").html("修改资源");
                        $("#courseReourceModal").modal("show");
                        $("#add-resource-true2").hide();
                        $("#modify-resource-true2").show();
                    }
                    else{
                        alert(response.message)
                    }
                }

            })
        }

        function modifyResourceTrue() {
            let formData=new FormData($("#myForm")[0]);
            $.ajax({
                type:"post",
                url:"/backResource/modifyResource",
                data: formData,
                processData: false,
                contentType: false,
                success: function (response) {

                    if (response.status==1){
                        alert(response.message)
                        location.href="/backResource/showResources?courseId="+$("#courseId").val()+"&chapterId="+$("#course-resource-id").val();
                    }
                    else{
                        alert("系统异常！")
                    }
                }
            })
        }

    </script>

</head>

<body>
    <div class="panel panel-default" id="userPic">
        <div class="panel-heading">
            <h3 class="panel-title">用户资源管理</h3>
        </div>
        <div>
            <input type="button" value="添加资源" class="btn btn-primary" id="doAddCourseReource" style="margin: 5px 5px 5px 15px;" />
            <input type="button" value="查询" class="btn btn-success" id="doSearch" style="margin: 5px 5px 5px 15px;" onclick="searchResources()" />
            <input type="button" class="btn btn-primary" id="show-user-resource-search" value="展开搜索" />
            <input type="button" value="收起搜索" class="btn btn-primary" id="upp-user-resource-search" style="display: none;" />
        </div>

        <div class="panel-body">
            <div class="show-user-resource-search" style="display: none;">
                <form class="form-horizontal">
                    <input id="search-courseId" type="hidden" th:value="${courseId}">
                    <input id="search-chapterId" type="hidden" th:value="${chapterId}">
                    <div class="form-group">
                        <div class="form-group col-xs-6">
                            <label for="user-resource-title-search" class="col-xs-3 control-label">标题：</label>
                            <div class="col-xs-8">
                                <input type="text" class="form-control" id="user-resource-title-search" placeholder="请输入标题" />
                            </div>
                        </div>
                        <div class="form-group col-xs-6">
                            <label for="user-name-search" class="col-xs-3 control-label">用户ID：</label>
                            <div class="col-xs-8">
                                <input type="text" class="form-control" id="user-name-search" placeholder="请输入用户ID" />
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="form-group col-xs-6">
                            <label class="col-xs-3 control-label">开始日期：</label>
                            <div class="col-xs-8">
                                <input type="text" class="form-control" placeholder="请输入开始时间:2017-10-10" id="dateStart"/>
                            </div>
                        </div>
                        <div class="form-group col-xs-6">
                            <label class="col-xs-3 control-label">结束日期：</label>
                            <div class="col-xs-8">
                                <input type="text" class="form-control" placeholder="请输入结束时间:2017-10-12"  id="dateEnd"/>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="form-group col-xs-6">
                            <label class="col-xs-3 control-label">状态：</label>
                            <div class="col-xs-8">
                                <select class="form-control" id="status" >
                                    <option value="-1" >全部</option>
                                    <option value="1" >启用</option>
                                    <option value="0" >禁用</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group col-xs-6">
                            <label class="col-xs-3 control-label">文件类型：</label>
                            <div class="col-xs-8">
                                <select class="form-control" id="fileType">
                                    <option value="-1" >全部</option>
                                    <option value="mp4" >mp4</option>
                                    <option value="pdf" >pdf</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                </form>
            </div>

            <!--  -->
            <div class="show-list" id="showList">
                <table class="table table-bordered table-hover" style="text-align: center;">
                    <thead>
                        <tr class="text-danger">
                            <th class="text-center width50">编号</th>
                            <th class="text-center">资源标题</th>
                            <th class="text-center width50">资源相对路径</th>
                            <th class="text-center">文件原始名称</th>
                            <th class="text-center width50">文件大小</th>
                            <th class="text-center width50">文件类型</th>
                            <th class="text-center width90">上传时间</th>
                            <th class="text-center width50">消费类型</th>
                            <th class="text-center width50">消费值</th>
                            <th class="text-center width50">上传用户</th>
                            <th class="text-center width50">状态</th>
                            <th class="text-center width120">操作</th>
                        </tr>
                    </thead>
                    <tbody id="tb">
                        <tr th:each="resourceVo:${resourceVos}">
                            <td th:text="${resourceVo.id}"></td>
                            <td th:text="${resourceVo.title}"></td>
                            <td th:text="${resourceVo.path}" class="width120"></td>
                            <td th:text="${resourceVo.originalName}" class="width120"></td>
                            <td th:text="${resourceVo.fileSize}"></td>
                            <td th:text="${resourceVo.fileType}==1?'mp4':'pdf'"></td>
                            <td th:text="${resourceVo.createDate}"></td>
                            <td th:text="${resourceVo.costType}"></td>
                            <td th:text="${resourceVo.costNumber}"></td>
                            <td th:text="${resourceVo.userName}"></td>
                            <td th:text="${resourceVo.status}==1?'启用':'禁用'"></td>
                            <td class="text-center">
                                <input type="button" class="btn btn-warning btn-sm course-reource-modify-btn"
                                       th:onclick="|javascript:selectResource('${resourceVo.id}')|" value="修改">
                                <input type="button" th:class="${resourceVo.status}==1?'btn btn-danger btn-sm':'btn btn-success btn-sm'"
                                       th:value="${resourceVo.status}==1?'禁用':'启用'"
                                       th:onclick="|javascript:modifyStatus('${resourceVo.id}')|"/>
                                <input type="button" class="btn btn-success btn-sm resource-detail"
                                       th:onclick="|javascript:showResourceDetail('${resourceVo.id}')|"
                                       value="详情" />
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <!-- 分页 -->
<!--            <div style="text-align: center;" >-->
<!--                <ul id="myPages" ></ul>-->
<!--            </div>-->

        </div>
    </div>

    <div class="modal fade" tabindex="-1" id="courseReourceModal" >
        <!-- 窗口声明 -->
        <div class="modal-dialog modal-lg">
            <!-- 内容声明 -->
            <div class="modal-content">
                <form id="myForm" enctype="multipart/form-data">
                <!-- 头部、主体、脚注 -->
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title" >用户资源</h4>
                </div>
                <div class="modal-body text-center">
                    
                    <input  name="resourceId" id="resourceId" style="display: none" />

                    <div class="row text-right" id="courseId-input" >
                        <label for="course-resource-id" class="col-xs-4 control-label">课程编号：</label>
                        <div class="col-xs-4">
                            <input type="text" class="form-control" id="courseId"  name="courseId"/>
                        </div>
                    </div>
                    <br>
                    <div class="row text-right" id="course-resource-id-input" >
                        <label for="course-resource-id" class="col-xs-4 control-label">章节编号：</label>
                        <div class="col-xs-4">
                            <input type="text" class="form-control" id="course-resource-id"  name="chapterId"/>
                        </div>
                    </div>
                    <br>
                    <div class="row text-right">
                        <label class="col-xs-4 control-label">资源：</label>
                        <div class="col-xs-4">
                            <a href="javascript:fileUpload('#course-resource-file');" class="file" >选择文件</a>
                            <input type="file" name="resource_file" style="display: none;" onchange="fileChange(this)" id="course-resource-file"/>
                        </div>
                    </div>
                    <br/>
                    <div class="row text-right">
                        <label for="course-resource-file-title" class="col-xs-4 control-label">资源标题：</label>
                        <div class="col-xs-4">
                            <input type="text" class="form-control" id="course-resource-file-title" name="title"/>
                        </div>
                    </div>
                    <br>
                    <div class="row text-right">
                        <label for="file-cost-type" class="col-xs-4 control-label">查看资源花费类型：</label>
                        <div class="col-xs-4">
                            <select class="form-control" id="file-cost-type" name="costType" >
                                <option value="-1" >请选择</option>
                                <option value="1" >积分</option>
                                <option value="2" >金币</option>
                            </select>
                        </div>
                    </div>
                    <br>
                    <div class="row text-right">
                        <label for="file-cost-type-val" class="col-xs-4 control-label">花费值：</label>
                        <div class="col-xs-4">
                            <input type="text" class="form-control" id="file-cost-type-val" name="costNumber"/>
                        </div>
                    </div>
                    <br>
                    <div class="row text-right">
                        <label for="resource-type-id" class="col-xs-4 control-label">资源类型：</label>
                        <div class="col-xs-4">
                            <select class="form-control" id="resource-type-id" name="fileType" >
                                <option value="-1" >请选择</option>
                                <option value="1" >mp4</option>
                                <option value="2" >pdf</option>
                            </select>
                        </div>
                    </div>
                    <br>
                </div>
                <div class="modal-footer" id="add-resource-true2">
                    <input type="button" class="btn btn-primary course-reource-btn" value="确定" id="add-resource-true" hidden></input>
                    <button class="btn btn-primary cancel" data-dismiss="modal">取消</button>
                </div>
                    <div class="modal-footer" id="modify-resource-true2">
                    <input type="button" class="btn btn-primary course-reource-btn" value="确定" id="modify-resource-true" hidden
                           onclick="modifyResourceTrue()"></input>
                    <button class="btn btn-primary cancel" data-dismiss="modal">取消</button>
                </div>
                </form>
            </div>
        </div>
    </div>
</body>

</html>